<!-- 退出注册 -->
<template>

    <div class="register_quit_dialog_popup">

        <div class="main">
            <div class="main_header">
                <span>{{ t('register_quit_level') }}？</span>
                <span>{{ t('register_quit_tip') }}</span>
            </div>
            <div class="img_list">
                <ImgT :src="`/imgs/home/${locale}/hunt1.webp`" />
                <ImgT :src="`/imgs/home/${locale}/hunt2.webp`" />
                <ImgT :src="`/imgs/home/${locale}/hunt3.webp`" />
            </div>

            <div class="btn_list">
                <nut-button class="submit_out" @click="quit">{{ t('register_quit_cancel') }}</nut-button>
                <nut-button class="submit_sure" @click="toGo">{{ t('register_quit_confirm') }}</nut-button>
            </div>
        </div>

    </div>

</template>

<script setup lang="ts">
// import { ref } from "vue";
// import { storeToRefs } from 'pinia';
import pinia from '@/store/index';
import { User } from '@/store/user';
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

// const userInfo = User(pinia);
const router = useRouter();
// const show = ref(storeToRefs(userInfo).isRegQuit)
const { t, locale } = useI18n();

const quit = () => {
    User(pinia).setRegQuit(false)
}

const toGo = () => {
    User(pinia).setRegQuit(false)
    router.push('/freeLoot')
}

</script>

<style lang="scss">
.register_quit_dialog_popup {
    .nut-popup {
        background-color: rgba(0, 0, 0, 0);
    }

    .main {
        border-radius: 16px;
        background: #131232;
        box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
        padding: 32px 20px;

        .main_header {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1;

            span {
                &:nth-child(1) {
                    color: #FFFFFF;
                    font-size: 16px;
                }

                &:nth-child(2) {
                    color: #FFFFFF;
                    font-size: 12px;
                    font-weight: 400;
                    margin-top: 8px;
                }
            }
        }

        .img_list {
            margin: 20px 0px;
            display: flex;
            gap: 12px;

            img {
                width: 94px;
                height: 148px;
            }
        }

        .btn_list {
            display: flex;
            gap: 15px;

            .submit_out {
                width: 146px;
                height: 44px;
                border-radius: 8px;
                background: #282747 !important;

            }

            .submit_sure {
                width: 146px;
                height: 44px;
                border-radius: 8px;
            }
        }

    }
}
</style>